<template>
    <div class="financial">
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" size="small" @click="handleAdd">
                <template #icon> <icon name="el-icon-Plus" /> </template>
                新增
            </el-button>
        </el-card>
        <el-card v-loading="pager.loading" class="mt-2 !border-none" shadow="never">
            <mtable
                :data="pager.lists"
                :type="typeTable"
                :list="options.tableTile"
                :operation="true"
                toolwidth="140"
                :tableheight="getTableheight"
                :bill="false"
                @handleAdds="handleAdds"
            >
                <template #tool="{ item }">
                    <el-table-column
                        v-if="item.display == 1"
                        sortable
                        :label="item.name"
                        show-overflow-tooltip
                        :prop="item.value"
                        :width="item.width"
                    >
                        <template #="{ row }">
                            <div v-if="item.name === '状态'" class="status">
                                <button v-show="row[item.value] == 1" class="enable">启用</button>
                                <section v-show="row[item.value] == 0" class="disable">
                                    禁用
                                </section>
                            </div>
                            <div v-if="item.name === '绑定单据'" class="order-type">
                                {{ row.order_type_text || '无' }}
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operation="{ row }">
                    <el-button type="primary" link @click="handleToFlow(row.id, 'check')">
                        查看
                    </el-button>
                    <el-button type="primary" link @click="handleToFlow(row.id, 'edit')">
                        编辑
                    </el-button>
                    <!-- <el-popconfirm
            title="确定要删除当前流程吗?"
            @confirm="handleDel(row.id)"
          >
            <template #reference>
              <el-button type="danger" link> 删除 </el-button>
            </template>
          </el-popconfirm> -->
                </template>
            </mtable>
            <div class="flex justify-end">
                <pagination v-model="pager" @change="getList" />
            </div>
        </el-card>
        <EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getList" />
    </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { getList } from '@/api/financial/system'
import { getCommonFieldDisplay } from '@/api/tools/code'
import mtable from '@/components/table/index.vue'
import EdittablePopup from '@/components/settable/index.vue'
onMounted(() => {
    getLists()
    fetchCommonFieldDisplay()
})
const router = useRouter()
const { pager, getLists } = usePaging({ fetchFun: getList })
const options = reactive({ tableTile: [] })
// 表格的最大高度
const getTableheight = computed(() => {
    return parseInt(document.documentElement.clientHeight + '') - 185 + 'px'
})
// 公共的表头字段
const typeTable = 'system_settings'
const fetchCommonFieldDisplay = async () => {
    const data = await getCommonFieldDisplay({ type: typeTable })
    options.tableTile = data
}
// 设置表头字段弹窗
const showTable = ref(false)
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>()
const handleAdds = async () => {
    showTable.value = true
    await nextTick()
    editRefs.value?.open('add')
}
// 新增 -> 跳转流程设置页面
const handleAdd = () => {
    console.log('跳转至新增流程页面')
    router.push('/financial/flow')
}
// 编辑/查看 -> 跳转流程设置页面
const handleToFlow = (id: string, type: string) => {
    console.log('跳转至编辑、查看流程页面，并携带流程类型和ID')
    router.push({
        path: '/financial/flow',
        query: { id, type }
    })
}
// 删除
//   const handleDel = async (id: string) => {
//     await adminDelete({ id });
//     getLists();
//   };
</script>
<style scoped lang="scss">
.status {
    .enable,
    .disable {
        width: 50px;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
    }
    .enable {
        color: #2fc540;
        background-color: #98de97;
    }
    .disable {
        color: #ffa5ae;
        background-color: #ff4c62;
    }
}
.order-type {
    border-radius: 5px;
    display: inline-block;
    line-height: 25px;
    padding: 0 10px;
    color: #3b72fb;
    text-align: center;
    border: 1px solid #d3d3d3;
}
</style>
